<template>
  <div class="imgs">
    <ul>
      <li class="item" v-for="(image, index) in blog.imageList" :key="index" :style="{
        'background-image': 'url(' + image + ')','animation-delay': 5*(index)+'s'
      }">
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">

// const imageList = [
//   "http://free.yhl.zone/statics//Note/%E5%9B%BE%E7%89%87/2024/01/27/1706353124629_IMG_20230129_193030.jpg/20240127185845-1706353124629_IMG_20230129_193030.jpg",
//   "http://free.yhl.zone/statics//Note/%E5%9B%BE%E7%89%87/2024/01/27/1706352958961_IMG_20230930_190042.jpg/20240127185600-1706352958961_IMG_20230930_190042.jpg",
//   "http://free.yhl.zone/statics//Note/%E5%9B%BE%E7%89%87/2024/01/03/20240103003643-%E7%8B%97%E9%BB%84.jpg/20240103003643-%E7%8B%97%E9%BB%84.jpg",
//   "http://free.yhl.zone/statics//Note/%E5%9B%BE%E7%89%87/2024/01/03/20240103003734-IMG_20170106_145730_1509032333231.jpg/20240103003734-IMG_20170106_145730_1509032333231.jpg",
//   "http://free.yhl.zone/statics//Note/%E5%9B%BE%E7%89%87/2024/01/27/%E7%83%A4%E4%B8%B2/20240127185351-1706352823495_IMG_20231004_210959_1697895237059.jpg"
// ]
import {getSwiperList} from "@/api/blogInfo";
import useStore from "@/store";

const {blog} = useStore();
let imageList = []
// getSwiperList().then(res => {
//   blog.swiperList = [...res.data.data]
// })
getSwiperList().then(res => {
  blog.imageList = [...res.data.data]
  setInterval(() => {
    getSwiperList().then(res => {
      blog.imageList = []
      setTimeout(() => {
        blog.imageList = [...res.data.data]
      }, 2000)

    })
  }, blog.imageList.length * 5000+5000)
})

///note/getSwiperList
</script>

<style lang="scss" scoped>
@import "@/assets/styles/mixin.scss";

.imgs {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -9;
  background-color: #363636;
  overflow: hidden;

  .item {
    @include absolute;
    width: 100%;
    height: 100%;
    background: no-repeat 50% 50% / cover;
    opacity: 0;
    animation: imageAnimation 50s linear infinite 0s;
    backface-visibility: hidden;
    transform-style: preserve-3d;

    //&:nth-child(1) {
    //  animation-delay: 5s;
    //}
    //
    //&:nth-child(2) {
    //  animation-delay: 10s;
    //}
    //
    //&:nth-child(3) {
    //  animation-delay: 15s;
    //}
    //
    //&:nth-child(4) {
    //  animation-delay: 20s;
    //}
    //
    //&:nth-child(5) {
    //  animation-delay: 25s;
    //}
    //
    //&:nth-child(6) {
    //  animation-delay: 30s;
    //}
    //
    //&:nth-child(7) {
    //  animation-delay: 35s;
    //}
    //
    //&:nth-child(8) {
    //  animation-delay: 40s;
    //}
    //
    //&:nth-child(9) {
    //  animation-delay: 45s;
    //}
    //
    //&:nth-child(10) {
    //  animation-delay: 50s;
    //}
    //
    //&:nth-child(11) {
    //  animation-delay: 55s;
    //}
  }

  &::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .2);
    transition: all .2s ease-in-out 0s;
  }
}

@keyframes imageAnimation {
  0% {
    opacity: 0;
    animation-timing-function: ease-in;
  }

  5% {
    opacity: 1;
    transform: scale(1.1);
  }

  10% {
    opacity: 1;
    transform: scale(1.2);
    animation-timing-function: ease-out;
  }
  15% {
    opacity: 1;
    transform: scale(1.3);
    animation-timing-function: ease-out;
  }
  20% {
    opacity: 0;
    transform: scale(1.4);
  }

  100% {
    opacity: 0;
  }
}
</style>
